<script setup>
import { computed, ref, watch } from "vue";
// import { addTopicApi, getTopicApi, editTopicApi } from "@/api/topic";
import { ElMessage } from "element-plus";
import { useBuildingList, useHouseList } from "@/hooks/index";
const props = defineProps({
  communityList: {
    type: Array,
    default: [],
  },
});

const isShow = ref(true);

const defaultFormData = () => ({
  birth: "",
  building_code: "",
  community_code: "",
  gender: 1,
  house_code: "",
  identity_id: "",
  name: "",
  occupation: "",
  owner_type: 1,
  photo: "",
  remark: "",
  tel: "",
});

const formData = ref(defaultFormData());
const formRules = {
  community_code: [
    {
      required: true,
      message: "所属小区编号不可为空且检查类型",
      trigger: "change",
    },
  ],
  building_code: [
    {
      required: true,
      message: "所属栋数编号不可为空且检查类型",
      trigger: "change",
    },
  ],
  house_code: [
    {
      required: true,
      message: "房产编号不可为空且检查类型",
      trigger: "change",
    },
  ],
  name: [{ required: true, message: "请输入", trigger: "blur" }],
  gender: [{ required: true, message: "请选择", trigger: "change" }],
  owner_type: [{ required: true, message: "请选择", trigger: "change" }],
};

const title = computed(() => {
  return formData.value.id ? "修改人员信息" : "新增人员信息";
});

const buildingList = ref([]);
const changeCommunity = async (value) => {
  if (value) {
    // formData.value.building_code = null;
    buildingList.value = await useBuildingList(value);
  } else {
    formData.value.building_code = null;
    buildingList.value = [];
  }
  console.log(buildingList.value);
};

const houseList = ref([]);
const changeBuilding = async (value) => {
  if (value) {
    // formData.value.building_code = null;
    houseList.value = await useHouseList(value);
  } else {
    formData.value.house_code = null;
    houseList.value = [];
  }
  console.log(houseList.value);
};

// 关闭
const closeDrawer = () => {
  // console.log("关闭前");
  formData.value = defaultFormData();
  formRef.value.resetFields();
  isShow.value = false;
};

// 提交
const formRef = ref();
const emit = defineEmits(["updateList"]);

// 回显
const replayData = async (id) => {
  const res = await getTopicApi(id);
  formData.value = res;
  isShow.value = true;
};

// 提交
const onSubmit = async () => {
  // try {
  //   await formRef.value.validate();
  //   await editorRef.value.validate();
  //   formData.value.id
  //     ? await editTopicApi(toRaw(formData.value))
  //     : await addTopicApi(toRaw(formData.value));
  //   ElMessage.success(formData.value.id ? "修改成功" : "添加成功");
  //   emit("updateList");
  //   closeDrawer();
  // } catch (error) {
  //   console.log(error);
  // }
};

defineExpose({
  isShow,
  replayData,
});
</script>

<template>
  <el-drawer
    :title="title"
    v-model="isShow"
    direction="rtl"
    size="45%"
    :before-close="closeDrawer"
    :show-close="true"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="80px"
      :inline="false"
      label-position="top"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="所属小区" prop="community_code">
            <el-select
              v-model="formData.community_code"
              placeholder="请选择"
              clearable
              @change="changeCommunity"
            >
              <el-option
                v-for="item in communityList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属栋数" prop="building_code">
            <el-select
              v-model="formData.building_code"
              placeholder="请选择"
              clearable
              @change="changeBuilding"
            >
              <el-option
                v-for="item in buildingList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="所属房产" prop="house_code">
            <el-select
              v-model="formData.house_code"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in houseList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="成员姓名" prop="name">
            <el-input
              v-model="formData.name"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="身份证号" prop="identity_id">
            <el-input
              v-model="formData.identity_id"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生日期" prop="birth">
            <el-input
              v-model="formData.birth"
              placeholder="请输入"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="联系方式" prop="tel">
            <el-input
              v-model="formData.tel"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职业" prop="occupation">
            <el-input
              v-model="formData.occupation"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="联系方式" prop="tel">
            <el-input
              v-model="formData.tel"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职业" prop="occupation">
            <el-input
              v-model="formData.occupation"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row> -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="成员照片" prop="photo">
            <imageUpload
              v-model="formData.photo"
              :type="'member'"
              :limit="1"
            ></imageUpload>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职业" prop="occupation">
            <el-input
              v-model="formData.occupation"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item>
        <el-button type="primary">确定</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<style lang="scss" scoped>
// .el-form-item__content {
//   :deep .ql-editor {
//     height: 200px;
//     width: 450px;
//   }
// }
</style>
